<template>
    <div class="clearfix">
        <section class="content-header">安全管理&nbsp;/&nbsp;安全培训</section>
        <section class="title">
            <div class="find">
                <div class="clearfix">
                    <div class="col-md-2 clearfix">
                        <div class="form-group">
                            <label class="col-md-4 control-label">标题：</label>
                            <div class="col-md-8">
                                <input
                                    type="email"
                                    class="form-control"
                                    id="inputEmail3"
                                    placeholder="请输入标题"
                                    v-model="selectData.title"
                                >
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5 clearfix">
                        <div class="form-group">
                            <label class="col-md-2 control-label">时间：</label>
                            <div class="col-md-4">
                                <input
                                    type="text"
                                    class="form-control pull-right"
                                    id="datepicker1"
                                    placeholder="YYYY-MM-DD HH:II:SS"
                                    v-model="selectData.startTime"
                                >
                            </div>
                            <div style="padding:0px;line-height:34px;float:left">--</div>
                            <div class="col-md-4">
                                <input
                                    type="text"
                                    class="form-control pull-right"
                                    id="datepicker2"
                                    placeholder="YYYY-MM-DD HH:II:SS"
                                    v-model="selectData.endTime"
                                >
                            </div>
                        </div>
                    </div>

                    <div class="col-md-1 clearfix">
                        <!-- <button type="button" class="btn btn-primary" @click="$refs.page.getList(1)">查询</button> -->
                        <button
                            type="button"
                            class="btn btn-primary"
                            @click="$refs.page.getList(1);"
                        >查询</button>
                    </div>
                    <div class="col-md-1 clearfix">
                        <!-- <button type="button" class="btn btn-primary" @click="reset()">重置</button> -->
                        <button type="button" class="btn btn-primary" @click="reset">重置</button>
                    </div>
                </div>
            </div>
            <div class="row" style="margin:0 5px">
                <button
                    type="button"
                    class="btn btn-primary"
                    data-toggle="modal"
                    data-target="#myModal"
                    style="margin-right:20px"
                >
                    <i class="fa fa-plus" aria-hidden="true"></i>&nbsp;&nbsp;上传培训数据
                </button>
                <button
                    type="button"
                    class="btn btn-primary"
                    data-toggle="modal"
                    data-target=".bs-example-modal-lg"
                    @click="removeBatch()"
                >
                    <i class="fa fa-trash" aria-hidden="true"></i>&nbsp;&nbsp;批量删除
                </button>
            </div>
        </section>
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <!-- /.box-header -->
                        <div class="box-body">
                            <table
                                id="example2"
                                class="table table-bordered table-hover"
                                style="font-size:14px"
                            >
                                <thead>
                                    <tr>
                                        <td>
                                            <input
                                                type="checkbox"
                                                name
                                                id
                                                :checked="list.length===deleteId.length && deleteId.length"
                                                @click="checkedAll"
                                            >
                                        </td>
                                        <th>标题</th>
                                        <th>摘要</th>
                                        <th>上传</th>
                                        <th>时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-if="list.length==0">
                                        <td colspan="999">暂无数据</td>
                                    </tr>
                                    <!-- <tr v-for="item in selSafeList" :key="item.value"> -->
                                    <tr v-for="item in list" :key="item.value">
                                        <td>
                                            <input
                                                type="checkbox"
                                                :checked="deleteId.indexOf(item.id)>=0"
                                                name="checkboxinput"
                                                class="input-checkbox"
                                                @click="checkedOne(item.id)"
                                            >
                                        </td>
                                        <td>{{item.title}}</td>
                                        <td>{{item.abstracts}}</td>
                                        <td>{{item.personName}}</td>
                                        <td>{{item.time}}</td>
                                        <td>
                                            <!-- <router-link :to="{path:'shenhe',query:{safeId:item.safeId,status:item.safeStatus}}">查看</router-link> -->
                                            <a :href="item.path" target="_blank">查看</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="col-md-4 col-md-offset-7" style="margin-top:50px;">
                                <!-- <ctrlPage :setPage="selSafe" :type="type" ref="page" /> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Modal -->
        <div
            class="modal fade"
            id="myModal"
            tabindex="-1"
            role="dialog"
            aria-labelledby="myModalLabel"
        >
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form enctype="multipart/form-data">
                        <div class="modal-header">
                            <button
                                type="button"
                                class="close"
                                data-dismiss="modal"
                                aria-label="Close"
                            >
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title" id="myModalLabel">上传会议记录</h4>
                        </div>
                        <div class="modal-body row">
                            <div class="col-md-12 clearfix">
                                <div class="form-group">
                                    <label class="col-md-1 control-label">*标题：</label>
                                    <div class="col-md-10">
                                        <input
                                            type="email"
                                            class="form-control"
                                            id="inputEmail3"
                                            v-model="form.title"
                                            placeholder="请输入标题"
                                        >
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12 clearfix">
                                <div class="form-group">
                                    <label class="col-md-1 control-label">摘要：</label>
                                    <div class="col-md-10">
                                        <input
                                            type="email"
                                            class="form-control"
                                            id="inputEmail3"
                                            v-model="form.abstracts"
                                            placeholder="请输入摘要"
                                        >
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 clearfix">
                                <div class="form-group">
                                    <label class="col-md-1 control-label">
                                        <i
                                            class="fa fa-cloud-upload"
                                            aria-hidden="true"
                                            style="font-size:40px"
                                        ></i>
                                    </label>
                                    <div class="col-md-10">
                                        <div style="display:none">
                                            <input
                                                type="file"
                                                ref="inputfile"
                                                @change="changefile($event)"
                                                :action="uploadUrl"
                                            >
                                        </div>
                                        <div style="line-height:34px;">上传文件</div>
                                        <div
                                            style="line-height:34px;color:#c6c6c6"
                                        >仅支持xlsx.，xls.，pdf.，docx.,doc.，文件大小≤4M。</div>
                                        <div>
                                            <input
                                                type="email"
                                                class="form-control"
                                                style="display:inline;width:80%"
                                                v-model="filepath"
                                                placeholder="选择文件"
                                                disabled
                                            >
                                            <button
                                                type="button"
                                                class="btn btn-primary"
                                                style="float:right"
                                                @click="$refs.inputfile.click()"
                                            >选择文件</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button
                                type="button"
                                class="btn btn-default"
                                data-dismiss="modal"
                                ref="btn"
                            >关闭</button>
                            <button type="button" class="btn btn-primary" @click="addMeeting">上传</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- 分页 -->
        <div class="col-md-offset-8 col-md-4 clearfix" style="margin-top:20px;">
            <ctrlPage :setPage="getList" :type="type" ref="page"/>
        </div>
    </div>
</template>

<script>
import ctrlPage from "@/components/common/ctrlPage.vue";
import utils from "@/utils";

export default {
    data() {
        return {
            type: "total, prev, pager, next, jumper",
            selectData: {
                title: "",
                startTime: utils.nowDate(-7),
                endTime: utils.nowDate(0)
            },
            form: {
                title: "",
                path: "",
                abstracts: "",
                time1: utils.getDate()
            },
            // 文件上传地址
            uploadUrl: `${window.apiPrefix}api/safe/train/uploadFile`,
            fileList: [],
            list: [],
            total: "",
            deleteId: [],
            deleteList: "",
            isCheckedAll: false,
            file: "",
            filepath: ""
        };
    },
    components: {
        ctrlPage
    },
    mounted() {
        this.selectDate1();
        this.selectDate2();
        this.$refs.page.getList(1);
    },
    watch: {
        deleteId() {
            this.deleteList = "";
            this.deleteId.forEach(item => {
                this.deleteList += `${item},`;
            });
            this.deleteList = this.deleteList.substr(
                0,
                this.deleteList.length - 1
            );
        }
    },
    methods: {
        changefile(event) {
            // console.log(event.target.files[0].name)
            this.file = event.target.files[0];
            this.filepath = event.target.files[0].name;
            let formdata = new FormData();
            formdata.append("file", this.file);
            this.$api.safe.trainFile(formdata).then(res => {
                if (res.success) {
                    this.form.path = res.data;
                }
            });
        },
        selectDate1() {
            $("#datepicker1")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: "year",
                    minView: "month"
                })
                .on("changeDate", ev => {
                    this.selectData.startTime = ev.target.value;
                });
        },
        selectDate2() {
            $("#datepicker2")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: "year",
                    minView: "month"
                })
                .on("changeDate", ev => {
                    this.selectData.endTime = ev.target.value;
                });
        },
        //是否选择
        checkedOne(id) {
            let idIndex = this.deleteId.indexOf(id);
            if (idIndex >= 0) {
                //如果已经包含就去除
                this.deleteId.splice(idIndex, 1);
            } else {
                //如果没有包含就添加
                this.deleteId.push(id);
            }
        },
        //控制全选按钮
        checkedAll(e) {
            this.isCheckedAll = e.target.checked;
            if (this.isCheckedAll) {
                //全选时
                this.deleteId = [];
                this.list.forEach(item => {
                    this.deleteId.push(item.id);
                });
            } else {
                this.deleteId = [];
            }
        },
        //批量删除
        removeBatch() {
            if (this.deleteList != "") {
                // console.log(this.deleteList)
                this.$api.safe
                    .removeBatchtrain({ list: this.deleteList })
                    .then(res => {
                        if (res.success) {
                            // console.log(res);
                            this.$$message({
                                message: "删除成功！",
                                type: "success"
                            });
                            this.$refs.page.getList(1);
                        }
                    });
            } else {
                this.$$message({
                    message: "请选择要删除的内容",
                    type: "warning"
                });
            }
        },
        //获取会议列表
        getList(pageIndex, pageSizes, callback) {
            this.$api.safe
                .selTrain({
                    pageNum: pageIndex || 1,
                    pageSize: pageSizes || 10,
                    title: this.selectData.title,
                    startTime: this.selectData.startTime + " 00:00:00",
                    endTime: this.selectData.endTime + " 23:59:59"
                })
                .then(res => {
                    if (res.success) {
                        // console.log(res);
                        this.list = res.data.list;
                        this.total = res.data.total;
                        callback(this.list, this.total);
                    }
                });
        },
        //上传安全会议
        addMeeting() {
            if (this.form.title == "") {
                this.$$message({
                    message: "请输入标题！",
                    type: "warning"
                });
            } else if (this.form.path == "") {
                this.$$message({
                    message: "请上传文件！",
                    type: "warning"
                });
            } else {
                this.$api.safe.addTrain(this.form).then(res => {
                    if (res.success) {
                        // console.log(res);
                        this.$refs.btn.click();
                        this.$$message({
                            message: "上传成功！",
                            type: "success"
                        });
                        this.$refs.page.getList(1);
                    }
                });
            }
        },
        //重置
        reset() {
            this.selectData.title = "";
            this.selectData.startTime = utils.nowDate(-7);
            this.selectData.endTime = utils.nowDate(0);
            this.$$message({
                message: "重置成功！",
                type: "success"
            });
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.title {
    padding: 15px 15px 0 15px;
    .find {
        background: #fff;
        border: 1px solid #bbb;
        padding: 20px 10px 10px 0;
        border-radius: 10px;
        margin-bottom: 15px;
    }
    .control-label {
        padding: 0px;
        line-height: 34px;
        text-align: right;
    }
    .col-md-8 {
        padding: 0;
    }
}
.box {
    th {
        text-align: center;
    }
    td {
        vertical-align: middle;
    }
}
.modal {
    .control-label {
        padding: 0px;
        line-height: 34px;
        text-align: right;
    }
}
</style>
